<template>
  <div>
    <h1 class="row-title">普通引入</h1>
    <div class="row">
      <wl-icon icon="user"></wl-icon>
      <wl-icon icon="bars"></wl-icon>
      <wl-icon icon="house"></wl-icon>
      <wl-icon icon="circle-user"></wl-icon>
    </div>
    <h1 class="row-title">设置不同的大小</h1>
    <div class="row">
      <wl-icon icon="user" size="xs"></wl-icon>
      <wl-icon icon="user" size="large"></wl-icon>
    </div>
    <h1 class="row-title">旋转与翻转</h1>
    <div class="row">
      <wl-icon icon="user" size="xs" rotation="90"></wl-icon>
      <wl-icon icon="user" size="large" flip="horizontal"></wl-icon>
      <wl-icon icon="user" size="large" flip="vertical"></wl-icon>
    </div>
    <h1 class="row-title">动画效果</h1>
    <div class="row">
      <wl-icon icon="user" size="xl" beat></wl-icon>
      <wl-icon icon="user" size="large" rotation="360" flip="horizontal" spin></wl-icon>
      <wl-icon icon="user" size="large" flip="vertical" fade></wl-icon>
    </div>
    <h1 class="row-title">添加自定义属性</h1>
    <div class="row">
      <wl-icon icon="user" size="xl" type="primary"></wl-icon>
      <wl-icon icon="user" size="large" type="success"></wl-icon>
      <wl-icon icon="user" size="large" type="info"></wl-icon>
      <wl-icon icon="user" size="large" color="red"></wl-icon>
    </div>
  </div>
</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped></style>
